<template>  
  <el-dialog :title="row.title" :visible="visible" @update:visible="close" :fullscreen="true">
    <log-tabs :height="areaHeight" :tabs="tabs" :active.sync="active"></log-tabs>
  </el-dialog>
</template>
<script type="text/javascript">
  import logTabs from './log-tabs'
  export default {
    props: ['visible', 'row', 'winP'],
    data () {
      return {
        tabs: {},
        active: ''
      }
    },
    computed: {
      areaHeight () {
        return Math.floor((this.winP.height - 192) / 21)
      }
    },
    watch: {
      row (newV, oldV) {
        this.getLogs()
      }
    },
    methods: {
      async getLogs () {
        let log = this.row.type === 'shell'
          ? {file: this.row.file}
          : {args: JSON.stringify(this.row.args, null, 2)}
        for (let i in this.row.log) {
          let v = this.row.log[i]
          if (typeof v === 'object') {
            log[i] = JSON.stringify(v, null, 2)
          }else if (typeof v === 'string') {
            if (v.startsWith('/') && v.length < 200) {
              try{
                let response = await this.$http.get(v)
                log[i] = response.body
              } catch(e) {
                console.log('http error: ', e)
                log[i] = `读取 ${v} 日志异常 ${e.message} : ${e.stack}`
              }
            }else{
              log[i] = v
            }
          }
        }
        this.$set(this, 'tabs', log)
        this.active = this.row.type === 'shell' ? 'file' : 'args'
      },
      close() {
        this.$emit('update:visible', false)
      }
    },
    components: {
      logTabs
    }
  }
</script>